import { Button, Switch, Table, Modal, message } from 'antd'
import { EditOutlined, DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import ProTypes from 'prop-types'
import { itemType } from './type'
import { RemoveUserFnc, ChangeSwitchFnc } from '@/api/user'

const Tables = ({dataSource, init, ipt, current, pageSize, total, sizeCurrentChange, changeDialog, openUserID, changePageNow, changeRoleBox}: itemType) => {
  const columns = [
    {dataIndex: 'key', width: 50},
    {title: '姓名', dataIndex: 'username', key: 'username', width: 100},
    {title: '邮箱', dataIndex: 'email', key: 'email', width: 170, ellipsis: true},
    {title: '电话', dataIndex: 'mobile', key: 'mobile', width: 130, ellipsis: true},
    {title: '角色', dataIndex: 'role_name', key: 'role_name',width: 120, ellipsis: true},
    {title: '状态', dataIndex: 'mg_state', width: 80, key: 'mg_state', render: (value: boolean, item: {id: number, mg_state: boolean}) => {
      return <Switch defaultChecked={item.mg_state} onChange={(checked: boolean) => changeSwitch(item.id, checked)}/>
    }},
    {title: '操作', width: 250, render: (info: {id: number, username: string, role_name: string}) => {
      return (
        <>
          <Button type='primary' size='small' icon={<EditOutlined/>} onClick={() => edit(info.id)}>编辑</Button> 
          <Button type="primary" danger size='small' icon={<DeleteOutlined/>} onClick={() => deleteUser(info.id)} style={{margin: '0 6px 0'}}>删除</Button> 
          <Button color="yellow" variant="solid" size='small' icon={<UnorderedListOutlined/>} onClick={() => setUser(info.id, info.username, info.role_name)}>设置</Button>
        </>
      )
    }},
  ]
  
  // 打开编辑盒子
  const edit = (id: number) => {
    changeDialog(true, 'edit')
    openUserID(id)
  }


  // 删除用户
  const deleteUser = (id: number) => {
    Modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除用户, 是否继续?',
      onOk: async () => {
        const res = await RemoveUserFnc(id)
        if(res.data.meta.status === 200) {
          message.success('删除成功', 1.5, () => {
            if(total % pageSize === 1) {
              changePageNow()
            } else {
              init(ipt, current, pageSize)
            }
          })
        }
      }
    })
  }

  // 分配用户
  const setUser = (id: number, username: string, role_name: string) => {
    changeRoleBox(true, username, role_name)
    openUserID(id)
  }

  // switch 改变状态
  const changeSwitch = async (id: number, status: boolean) => {
    const res = await ChangeSwitchFnc({ id: id, state: status })
    if(res.data.meta.status === 200) message.success('更新成功', 1.5)
  }

  return (
    <Table dataSource={dataSource} columns={columns} rowKey={(record) => record.id} bordered={true} scroll={{x:500}} 
    pagination={{current: current, pageSize: pageSize, total: total, pageSizeOptions: [2,5,10], showQuickJumper: true, showSizeChanger: true, onChange: sizeCurrentChange}}/>
  )
}

export default Tables
Tables.proTypes = {
  dataSource: ProTypes.array.isRequired,
  init: ProTypes.func.isRequired,
  ipt: ProTypes.string.isRequired,
  current: ProTypes.number.isRequired,
  pageSize: ProTypes.number.isRequired,
  total: ProTypes.number.isRequired,
  sizeCurrentChange: ProTypes.func.isRequired,
  changeDialog: ProTypes.string.isRequired,
  openUserID: ProTypes.number.isRequired,
  changePageNow: ProTypes.func.isRequired,
  changeRoleBox: ProTypes.func.isRequired
}

